@charset "utf-8";
// 头部
.light{
	height: 100vh;
	background: linear-gradient(45deg, #ffe7ff 0%,#89bfb5 45%,#89bfb5 58%,#ffe7ff 99%);
}
.part{
  display: flex;
  justify-content: center;
}
.section button:hover{
	background-color: #d7fbe8;
}
.skin{
	cursor: pointer;
}
.section span{
	display: inherit;
}
/* 页面样式 */
// 未完成
.unfinish{
  margin-top: 50px;
  background: linear-gradient(318deg, transparent 3rem, #a6cdb0 3.5rem, #a6cdb0 3.6rem,#a6cdb0 0);
  border-radius: 11px;
  position: relative;
  width: 400px;
  height: 400px;
  color: #eeeeee;
  text-align: center;
  transform: rotate(358deg);
  transition: all .4s;
  box-shadow: -0.4em -0.4em 0.5em 0em rgba(0, 0, 0, 0.15);
  
}
.unfinishTitle{
  padding-top: 10px;
  font-size: 20px;
  font-weight: 500;
  // 轮流无限
  animation: shining 0.5s alternate infinite;
}
.unfinishList{
  margin-top: 10px;
  height: 268px;
  overflow:auto ;
}
.unfinishUL li{
  margin-left: auto;
  margin-right: auto;
  width: 80%;
  height: 50px;
  line-height: 65px;
  border-bottom: 1px dashed #eee;
  position: relative;
}
.unfinishUL .delet{
	width: 1.88rem;
	height: 1.88rem;
	transition: all .4s; 
}
.unfinishUL .delet:hover{
	cursor: pointer;
	transform: scale(1.2);
}
.choic{
  width: 24px;
  height: 24px;
  position: absolute;
  left: 5px;
  top: 21px;
  cursor: pointer;
}
.choic::after{
  content: '';
  background-color: #b9e0c3;
  display: inline-block;
  width: 23px;
  height: 23px;
  text-align: center;
}
.choic:checked::after{
  font-size: 20px;
  content: '';
  background-image: url('../images/勾.png');
  background-size: 100%;
  background-color: #aa96da;
  display: inline-block;
  width: 22px;
  height: 22px;
  line-height: 22px;
}
.choic:checked +.ListWord{
  text-decoration: line-through #b6b6b6;
}
.ListWord{
  width: 65%;
  height: 50px;
  font-size: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.unfinish:hover,.finish:hover{
  transform: scale(1.1);
}
// 三角形
.unfinish::before{
  content: '';
  position: absolute;
  right: 0px;
  top: 330px;
  width: 85px;
  height: 76px;
  border-radius: 25% 0 0 25%;
  background: linear-gradient(to left top, transparent 50%, rgba(127,189,148,0.6) 0, rgba(186,236,201,.4)) 85% 0 no-repeat;
  transform: rotate(361deg);
  transform-origin: bottom right; /* 让三角形的右下角成为旋转的中心 */
  border-bottom-left-radius: inherit; /* 左下角继承border-radius */
}
// 已完成
.finish{
	margin-left: 150px;
	margin-top: 50px;
	background: linear-gradient(318deg, transparent 3rem, #a6cdb0 3.5rem, #a6cdb0 3.6rem,#a6cdb0 0);
	border-radius: 11px;
	position: relative;
	width: 400px;
	height: 400px;
	color: #eeeeee;
	text-align: center;
	transform: rotate(3deg);
	transition: all .4s;
	box-shadow: -0.4em -0.4em 0.5em 0em rgba(0, 0, 0, 0.15);
}
// 三角形
.finish::before{
  content: '';
  position: absolute;
  right: 0px;
  top: 330px;
  width: 85px;
  height: 76px;
  border-radius: 25% 0 0 25%;
  background: linear-gradient(to left top, transparent 50%, rgba(127,189,148,0.6) 0,rgba(186,236,201,.4)) 85% 0 no-repeat;
  transform: rotate(361deg);
  transform-origin: bottom right; /* 让三角形的右下角成为旋转的中心 */
  border-bottom-left-radius: inherit; /* 左下角继承border-radius */
}
// 文字闪烁动画
@keyframes shining1 {
  from {
    text-shadow: 0 0 10px #aa96da, 0 0 20px #aa96da, 0 0 30px #aa96da, 0 0 40px skyblue, 0 0 50px skyblue, 0 0 60px skyblue;
  }

  to {
    text-shadow: 0 0 5px #aa96da, 0 0 10px #aa96da, 0 0 15px #aa96da, 0 0 20px skyblue, 0 0 25px skyblue, 0 0 30px skyblue;
  }
}
@keyframes shining {
		from {
			text-shadow: 0 0 20px #74a182, 0 0 30px #89c198, 0 0 40px #6aaf7c, 0 0 50px #7abf97, 0 0 60px #75ce9f;
		}

		to {
			text-shadow: 0 0 15px #68af6b, 0 0 20px #79bc97, 0 0 25px #77bc91, 0 0 30px #7eca98;
		}
	}